<template>
  <div class="page-preview">
    <split-pane split="vertical" :default-percent="30">
      <!-- 左侧 -->
      <template slot="paneL">
        <h4>页面预览器</h4>
        <el-input
          placeholder="请输入内容"
          v-model="url"
          :disabled="true"
        ></el-input>
        <iframe
          :src="url"
          id="id-iframe-aria-ur1"
          width="100%"
          height="750"
          @load="handleIframeLoad"
        ></iframe>
      </template>
      <!-- 右侧 -->
      <template slot="paneR">
        <add-broadcast-content :domData='domData' :varIsFreeze='varIsFreeze' :areaIsFreeze="areaIsFreeze"></add-broadcast-content>
      </template>
    </split-pane>
  </div>
</template>

<script>
import addBroadcastContent from '../content/addBroadcastContent.vue'
import {getFileNameInAria} from '@/utils/fileName'
export default {
  name: 'Preview',
  components: {
    addBroadcastContent
  },
  data () {
    return {
      // url: 'http://127.0.0.1:5173/',
      url: 'https://test-b-fat.pingan.com.cn/carLife/home/pages/moreIcon.html',
      domData :{
        domTree : '',
        domText : '',
        domCount : 1,
        xpath : ''
      },
      varIsFreeze: true,
      areaIsFreeze: true
    }
  },
  computed:{
    pageAriaContent(){
      return this.$store.state.saveAreaInfo.saveApiInfo
    }
  },
  async created(){
    localStorage.setItem('tabActive', 'first')
    this.$store.commit('setfileName', 'no')
    this.$store.commit('setUrl',this.url)
  },
  methods: {
    handleIframeLoad () {
      console.log('bbbbbbbb');
      const ariaIframe = document.getElementById('id-iframe-aria-ur1')
      // if (ariaIframe?.contentwindow) {
        // const targetorigin = urijs(this.url).origin()
        console.log('aaaaaaaaaa');
        setTimeout(() => { 
          ariaIframe.contentWindow.postMessage({
            code: 'ARIA_INIT_PREVIEW',
            fromAriaAdmin: true
          }, '*')
          console.log('ddddd', this.pageAriaContent);
          ariaIframe.contentWindow.postMessage({
            code: 'ARIA_MARK_DOM',
            ariaData: {...this.pageAriaContent}
          }, '*')
        }, 3000)
        window.addEventListener('message', (event)=> {
          console.log(event);
          const { data } = event
          if(data.code == 'DOM_TREE') {
            this.domData.domTree = data.message
            this.domData.domText = data.messageText
            this.domData.domCount = data.domCount
            this.domData.xpath = data.xpath
            // this.$store.commit('setCurVarible', this.domData)
            // 让对应tab栏的控件取消禁用
            const tabActive = localStorage.getItem('tabActive')
            if(tabActive === 'first') {
              this.varIsFreeze = false
            } else if (tabActive === 'second') {
              this.areaIsFreeze = false
            }
          }
          // 绿色圆点取消禁用时执行
          if(data.code == 'ARIA_GET_DATA') {
            this.domData.domTree = ''
            this.domData.domText = ''
            this.domData.domCount = ''
            this.domData.xpath = ''
          }
          
        })
    }
  }
}
</script>

<style scoped>
.page-preview {
  padding: 20px;
  height: 500px;
  overflow: auto;
}
#iframe-aria-url {
  display: block;
  border: 1px solid #ccc;
  border-radius: 3px;
  margin-top: 15px;
  box-shadow: 0 2px 24px rgba(0, 0, 0, 0.14);
}
::v-deep .splitter-pane-resizer {
  display: none;
}
</style>